<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局</title>
    <style type="text/css">
        .form-flex{
            display: flex;
        }
        .input-flex-grow{
            flex-grow: 1;
        }
        .btn3{
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div>表单包含一个输入框（&lt;input&gt;）和一个按钮（&lt;button&gt;）。根据标准，这两个控件都是行内块级元素（inline-block），也就是说，它们默认并排在一行上。
        <br>
        浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。</div>
        <form action="" class="form1">
            <input type="email" name="email">
            <button type="submit">Send</button>
        </form>
    </div>
    <hr>
    <div class="box2">
        <div>两个控件之间的间隔消失了，因为弹性布局的项目（item）默认没有间隔。</div>
        <form action="" class="form2 form-flex">
            <input type="email" name="email">
            <button type="submit">Send</button>
        </form>
    </div>
    <div class="box3">
        <div>flex-grow属性默认等于0，即使用本来的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。</div>
        <form action="" class="form3 form-flex">
            <input type="email" name="email" class="input-flex-grow">
            <button type="submit" class="btn btn3">Send</button>
        </form>
    </div>
</body>
</html>